 <!doctype html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>珍爱网注册</title>
 	 <script type="text/javascript" src="__PUBLIC__/Js/jquery-1.8.3.min.js" charset="utf-8"></script>
 	<style>
 		*{margin:0px;padding:0px;}
		img{border:0px;margin:0px;}
		a{text-decoration:none;color:#333333;width:0px; height:0px;text-align:center; }
		ul li{list-style:none;}
		body,h1,h2,h3,h4,h5,h6{font:12px/1.5 宋体,微软雅黑;color:#333333;}
		body{font: 13px/20px microsoft yahei;}
		/* body{font: 18px/30px Microsoft Yahei;} */
		h1{color:red;font-size:13.5px;}
		h5{color:red;font-size:15.5px;}
		h4{height: 53px;
		    margin-top: 30px;
		    color: #000;
		    font-size: 24px;
		    font-weight:normal;
		}
		/*预定义样式*/
		.w{width:1012px;margin:0 auto;}
		.fl{float:left;}
		.fr{float:right;}
		.clear{clear:both;}
		.border{border:1px solid red;}
		.mt133{margin-left:133px;}
		.mt20{margin-top:20px;}
		.mt30{margin-top:30px;}
		.mt5{margin-top:8px;}
		.padd{padding-top:5px}
		.disblock{ display:inline-block; }
		input{ 
	    height: 30px;
	    margin-right: 10px;
	    padding: 0 15px;
	    font: 14px/30px Microsoft Yahei;
	    color: #333;}
	    .inp{
	    width: 285px;
    	color: #ccc;}

    	dt{
    	font: 16px/30px Microsoft Yahei;
    	 float: left;
	    width: 80px;
	    height: 45px;
	    padding: 0 15px 0 0;
	    line-height:44px;
	    text-align: right;
	    overflow: hidden;
	    zoom: 1;}
	    .yzmmm{
	    	line-height:44px;
	    }
	    .option{
	    height: 30px;
	    margin-top:5px;
	    margin-right: 10px;
	    padding: 0 15px;
	    font: 14px/30px Microsoft Yahei;
	    color: #333;

		}
	    .inp{
	    width: 285px;
    	color: #ccc;}}
    	.spdis{
    		height:45px;
    		line-height: 44px;
    		width:20px;
    	}
    	.icon{ display:block;
		    width: 250px;
		    height: 50px;
		    margin: 25px 0 15px 100px;
		    font: 22px/48px Microsoft Yahei;
		    color: #fff;
		    text-align: center;
		    border: none;
		    cursor: pointer;
		    background: #ff8000;
		    overflow: hidden;
		    zoom: 1;
		}
		.refresh {
		    display: block;
		    float: left;
		    width: 20px;
		    height: 18px;
		    margin-top: 15px;
		    background: url('__PUBLIC__/Images/loading.gif') no-repeat;
		    overflow: hidden;
		    zoom: 1;
		    text-indent: -99999px;
		    cursor:pointer;
			}

		.error{ background:url('__PUBLIC__/Images/images_0925/icon.gif') no-repeat;}
		 .ok{display: block;
		    float: left;
		    width: 18px;
		    height: 18px;
		    margin: 6px 0 0 0;
		    line-height: 0px;
		    text-indent: -99999px;
		    background-position: -21px -46px;}
 	</style>
 </head>
 <body>
 	<div class="w"><img src="__PUBLIC__/Images/2016-02-24_104505.png" alt=""></div>
 	<div class="w">
 		<div>
 			<form action="<{:U('Public/insert')}>" method="post" >
 				
 				<dt>用户名称：</dt><input class="inp fl"type="text" name="name" >
				<div class="fl" id="yhky" style="height:34px; line-height:34px;">注册用户</div>
 				<div class="clear"></div>

 				<script>
                                     
                 $('input[name=name]').blur(function(){
                         wothis = $(this).val();
                          var id = $(this).val();
                          $.ajax({

                            url:"<{:U('Public/dovalidation')}>",
                            type:'get',
                       //   async:false,    // 同步/ 异步 
                            data:{id:id},
                            dataType:'json',
                            success: function (data){
                               // $('#yhky').removeClass().addClass(data);
                               		if(wothis ==''){
                               			$('#yhky').html('').html('注册用户');

                               		}else{
                                 	if(data == 'ok'){
                                 		$('#yhky').html('').html('用户可以');
                                 	}else if(data =='error'){
                                 		$('#yhky').html('').html('用户以存在');
                                 	}

                                 }
                                }

                    })

                });
                </script>
 				<dt>用户密码：</dt><input type="password" name="password" ><div class="clear"></div>
 				<div>
					<dt>性   别：</dt>
				  	 	<div class="fl">
				         <span> <input type="radio" name='sex'checked  value="0"></span>女
						</div>
				       
				          <input   type="radio" name='sex' value="1"> <span class="disblock spdis">男</span>
				</div> 
				<div class="clear"></div>
 				<div class="yzmmm fl">
 					<dt>验 证 码：</dt><input name="verify" type="text"><span id="phon"></span>
 				</div>
				

 				<div class="fl padd  ">
 					<img  height="34px" width="97px"src="<{:U('verify')}>" alt="">
 				</div>
 				<a href="javascript:verify1();" id="phonaaeRefreshValiCode" class="refresh"></a>
				<div class="fl" style="height:46px; line-height:44px; margin:0 14px;" id="yzmzq"></div>

				<div class="clear"></div>
				<br>
				<div><h4>完善资料</h4></div>

				<dt>婚姻状况：</dt>
			    <div>
			      <select class="option" name="status">
			      	<option value="0">未婚</option>
			      	<option value="1">离异</option>
			      	<option value="2">丧偶</option>
			      	<option value="" selected>请选择</option>
			      </select>
			    </div>
			    <div class="clear"></div>
				<dt>生 日：</dt>
				     <div class="col-sm-3">
				      <select id='birthYear' class="option" name='birthday_year'>
				      	<option value="">请选择</option>
				      	<?php 
				      		for($i=2015;$i>1950;$i--){   ?>
				      			<option value="<?php echo $i ?>"><?php echo $i ?></option>
				      	<?php	}
				      	?>
				      </select>
				      <select id='birthMonth' class="option"name='birthday_month'>
				      	<option value="">请选择</option>
				      	<?php
				      		for($j=12;$j>0;$j--){	?>
				      			<option value="<?php echo $j ?>"><?php echo $j ?></option>
				      	<?php }
				      	?>
				      </select>
				      <select id='birthDay'class="option" name='birthday_day'>
				      	<option value="">请选择</option>
				      	<?php
				      		for($s=31;$s>0;$s--){  ?>
				      			<option value="<?php echo $s ?>"><?php echo $s ?></option>

				      	<?php	}
				      	?>
				      </select>
					  <div class="clear"></div>
						
				      <dt>地 区：</dt>
				      <div>
					       <select id='prov1' name='s_province'></select>
					      <select id='city1' name='s_city'></select>
					      <select id='county1' name='s_county'></select>
				      </div>
					  <div class="clear"></div>

				    <dt>家 乡：</dt>
				    <div>
				       <select id='prov2' name='j_province'></select>
				      <select id='city2' name='j_city'></select>
				      <select id='county2' name='j_county'></select>
				    </div>

				    <div class="clear"></div>

					<div class=" fl" style="width:240px;"> 
					    <dt>身 高：</dt>
					    <div>
					      <input style="width:100px;" type="text"name='height'>
					    </div>
					</div>
					<div class="  fl"style="width:360px;"> 
					    <dt>学 历：</dt>
					    <div>
					      <select class="option" name='edu'>
					      	<option value="1">初中</option>
					      	<option value="2">中专/职高/技校</option>
					      	<option value="3">高中</option>
					      	<option value="4">大专</option>
					      	<option value="5">本科</option>
					      	<option value="6">硕士</option>
					      	<option value="7">博士</option>
					      	<option value="8">博士后</option>
					      	<option value="" selected>请选择</option>
					      </select>
					    </div>
				    </div>
					<div class="clear"></div>
					<div class="  fl" style="width:240px;" >
						   <dt>职 业：</dt>
						<div>
						    	<input style="width:100px;" type="text" class="form-control"  name='pakistan'>
					    </div>
					</div>
					<div class="  fl" style="width:340px;">
					    <dt>月收入 ：</dt>
					    <div>
					      <select class="option"  name='money'>
					      	<option value="1">2000以下</option>
					      	<option value="2">2000-4000</option>
					      	<option value="3">4000-6000</option>
					      	<option value="4">6000-8000</option>
					      	<option value="5">8000-10000</option>
					      	<option value="6">10000以上</option>
					      	<option value="" selected>请选择</option>
					      </select>
					    </div>
					</div>
					<div class="clear"></div>
					<button class="icon">注册完成</button>
 			</form>
 		</div>
 		<div>
 			
 		</div>
 	</div>

 	<div><img src="__PUBLIC__/Images/2016-02-24_104606.png" alt=""></div>
 </body>
<script>
						// 验证码自动验证
                        $('input[name=verify]').blur(function(){

                            var a=$(this).val();
                            $.ajax({
                                    url:"<{:U('Public/check_verify')}>",
                                    type:'get', 
        
                                    data:{code:a},
                                    dataType:'json',
                                    success: function (data){
                                    	if(data){
                                    		 $('#yzmzq').html('').html('验证成功');
                                    		 
                                    		}else{

                                    		  $('#yzmzq').html('').html('验证码错误！');
                                    		 
                                    		}
                                    	}       
                            })
                        });



						// 验证码刷新
                        	function verify1(){
                        		var captcha_img = $('#phonaaeRefreshValiCode').prev('div').find('img') ;
								var verifyimg = captcha_img.attr("src");  
								captcha_img.attr('title', '点击刷新');  
								    if( verifyimg.indexOf('?')>0){  
								        captcha_img.attr("src", verifyimg+'&random='+Math.random());  
								    }else{  
								        captcha_img.attr("src", verifyimg.replace(/\?.*$/,'')+'?'+Math.random());
								    }  
                        	}
</script>

<script>
 
$(document).ready(function(){
	loadData($("#prov1"));
	loadData($("#prov2"));
	//绑定事件
	$("#prov1,#city1,#prov2,#city2").change(function(){
		var id=$(this).val();
		loadData($(this).next('select'),id);
	})
	//ajax 加载数据的方法
		function loadData(s,id){
			if(id === undefined){
				id = 0;
			}
			$.ajax({
				url:"<{:U('Public/deal')}>",
				type:'get',
				data:{id:id},
				dataType:'json',
				success:function(dis){
					s.empty().hide();
					//清空下一个select并隐藏
					if(dis.length > 0){
						s.show();
						$.each(dis,function(index,value){
						$('<option>').html(value.name).val(value.id).appendTo(s);
						 
					})
						s.trigger('change');
					}
				} 
			})	
		}


})
</script>
 	 

 </html>